<div class="dialogs-container">
  <h1>弹窗演示</h1>
  <p class="description">演示各种对话框组件的使用方法</p>

  <div class="demo-cards">
    <!-- 确认对话框 -->
    <mat-card class="demo-card">
      <mat-card-header>
        <mat-icon mat-card-avatar>question_answer</mat-icon>
        <mat-card-title>确认对话框</mat-card-title>
        <mat-card-subtitle>confirm() - 需要用户确认的操作</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p>用于需要用户明确确认的操作，提供"取消"和"确认"两个选项。</p>
        <button mat-raised-button color="primary" (click)="showConfirmDialog()">
          <mat-icon>check_circle</mat-icon>
          显示确认对话框
        </button>
      </mat-card-content>
    </mat-card>

    <!-- 提示对话框 -->
    <mat-card class="demo-card">
      <mat-card-header>
        <mat-icon mat-card-avatar color="primary">info</mat-icon>
        <mat-card-title>提示对话框</mat-card-title>
        <mat-card-subtitle>alert() - 信息提示</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p>用于向用户展示重要信息或操作结果。</p>
        <button mat-raised-button color="primary" (click)="showAlertDialog()">
          <mat-icon>notifications</mat-icon>
          显示提示对话框
        </button>
      </mat-card-content>
    </mat-card>

    <!-- 错误对话框 -->
    <mat-card class="demo-card">
      <mat-card-header>
        <mat-icon mat-card-avatar color="warn">error_outline</mat-icon>
        <mat-card-title>错误对话框</mat-card-title>
        <mat-card-subtitle>errorAlert() - 错误信息展示</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p>用于展示操作失败的错误信息，包含错误详情和堆栈信息。</p>
        <button mat-raised-button color="warn" (click)="showErrorDialog()">
          <mat-icon>report_problem</mat-icon>
          显示错误对话框
        </button>
      </mat-card-content>
    </mat-card>

    <!-- 全屏对话框 -->
    <mat-card class="demo-card">
      <mat-card-header>
        <mat-icon mat-card-avatar color="accent">fullscreen</mat-icon>
        <mat-card-title>全屏对话框</mat-card-title>
        <mat-card-subtitle>fullscreen - 全屏显示</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p>全屏模式的对话框，适合移动端或需要更多空间的场景。</p>
        <button mat-raised-button color="accent" (click)="showFullscreenDialog()">
          <mat-icon>open_in_full</mat-icon>
          显示全屏对话框
        </button>
      </mat-card-content>
    </mat-card>
  </div>
</div>
